<template>
   <p>一 新人专享礼 一</p>
    <div id="main">
        <div id="mleft">
            <span>新人专享礼包</span>
            <img :src="url[0]" alt="">
        </div>
        <div id="mright">
            <div id="mright1">
                <span id="fu">福利社</span>
                <span id="jin">今日特价</span>
                <img :src="url[1]" alt="">
            </div>
            <div id="mright2">
                <span id="xin">新人拼团</span>
                <span id="yi">一元起包邮</span>
                <img :src="url[2]" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import {getBanner} from "../../api";

    export default {
        name: "XinRenZhuanXiangzxw",
        data(){
            return{
                msg:[],
                url:[]
            }
        },
        mounted() {
            getBanner('/home-xinren')
                .then(response=>{
                    this.msg = response.data
                    this.msg.map(item=>{
                        this.url.push(item.imgUrl)})
                })

        }
    }
</script>

<style scoped>
    p{
        text-align: center;
    }
    #main{
        width: 95%;
        height: 250px;
        margin: 10px auto;
        position: relative;
    }
    #mleft{
        height: 100%;
        width: 49%;
        display: inline-block;
        background: #F9E9CF;
        position: relative;
    }
    #mleft>img{
        height: 50%;
        display: block;
        margin: 0 auto;
        position: absolute;
        top: 35%;
        left: 15%;
    }
    #mleft>span{
        position: absolute;
        top:10%;
        left: 10%;
    }
    #mright{
        width: 50%;
        height: 100%;
        margin-left: 1%;
        display: inline-block;
        position: relative;
    }
    #mright img{
        height:90%;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #mright1{
        width: 100%;
        height: 49%;
        background: #FBE2D3;
        position: relative;
    }
    #mright span{
        position: absolute;
        left: 10%;
    }
    #fu{
        top: 10%;
    }
    #jin{
        top: 25%;
        color: gray;
        font-size: 14px;
    }
    #mright2{
        width: 100%;
        height: 49%;
        margin-top: 2%;
        background: #FFECC2;
        position: relative;
    }
    #xin{
        position: absolute;
        top: 10%;
        left: 10%;
    }
    #yi{
        position: absolute;
        top: 30%;
        left: 10%;
        color: #fff;
        font-size: 12px;
        background: #CBB693;
    }
    div{
        border-radius: 5px;
    }
</style>